<template>
    <el-main>
      <div>
     <!-- <input type="text" v-model="key" placeholder="请输入订单" height=""> -->
     <el-input type="text" v-model="key" placeholder="请输入订单服务内容" style="width:350px"></el-input>&nbsp;
      <el-button type="info"   @click="find()">搜索</el-button><br><br>
     <el-button type="primary"  @click="reload()">返回</el-button>&nbsp;&nbsp;&nbsp;&nbsp; 
     <el-button type="warning"  @click="tounsolved()">查看未处理订单</el-button>
     <br><br>
        <el-table
      :data="tableData"
       height="550"
      border
      style="width: auto">
      <el-table-column
        prop="content"
        label="服务内容"
        width="200"
        align="center">
      </el-table-column>
      <el-table-column
        prop="appointmentTime"
        label="服务时间"
        width="200"
        align="center">
      </el-table-column>
        <el-table-column
        prop="appointmentAddress"
        label="服务地点"
        width="200"
        align="center">
      </el-table-column>
        <el-table-column
        prop="contactmethod"
        label="联系方式"
        width="200"
        align="center">
      </el-table-column>
        <el-table-column
        prop="price"
        label="服务价格"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
         label="状态"
        align="center"
        width="100"> 
        <template slot-scope="scope">
          <span v-if="scope.row.status==1" style="color:SteelBlue"><b>已接单</b></span>
          <!-- <span v-if="scope.row.status==0">未接单</span> -->
          <span v-if="scope.row.status==2" style="color:green"><b>已完成</b></span>
           <span v-if="scope.row.status==3" style="color:red"><b>已取消</b></span>
           
          </template>  
      </el-table-column>
      <el-table-column     
        label="操作"
        align="center"
        width="150">
        
        <template slot-scope="scope"> 
          <!-- type里的选项只是颜色 -->
          <!-- 这些方法用于打开对话框，名字要和真正实现的方法，事件名区分 -->
          <el-button type="success" size="mini" @click="info(scope)">查看</el-button>
         <span v-if="scope.row.status==2||scope.row.status==3"><el-button type="danger" size="mini"  @click="del(scope)">删除</el-button></span>
         <!-- <el-button type="danger" size="mini"  @click="del(scope)">删除</el-button> -->
           
        </template>
      </el-table-column>
    </el-table>
        <!-- 详情对话框 -->
        <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="50%">
     <detail :current="current" @close="close"></detail>
    </el-dialog>


    </div>
    </el-main>
    
</template>
<script>
import detail from './Merchantorderdetail.vue'
export default {
           data() {
           return{
           tableData:[], 
           key:"",
             serviceOrder:{
            id:"",
            uid:"",
            cid:"",
            iid:"",
            content:"",
            appointmentTime:"",
            aoopintmnetAddress:"",
            status:"",
            price:"",
            community:"",
            
           },
            current:{},
            dialogVisible:false,
            // 多选
            multipleselection:[],
            //返回数组
            multiplearr:[],

      }
    },
    methods:{
      tounsolved:function(){
        this.$router.push("unacceptorder")
      },
       //查看详情
      info:function(scope){
        // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(scope.row)
        this.current = scope.row       
        // 显示对话框
        this.dialogVisible = true
      },
          close:function(){
         this.dialogVisible = false
      },
      // 搜索
      find:function(){
        // alert(this.key)
      this.$axios.get("http://localhost:8080/merchant/findorderbycontent1/"+this.key).then(res=>{
        if(res.data.status=="SUCCESS"){
          console.log("开心，查到了")
          this.tableData=res.data.data
          // this.tableData=JSON.parse(JSON.stringify(this.tableData))  

        }else{
          alert("没找到相关订单")
        }
      })
      },
       del:function(scope){
      this.serviceOrder=scope.row
      
      this.$axios.post("http://localhost:8080/serviceorder/del",this.serviceOrder).then(res =>{
      if(res.data.status=="SUCCESS"){
      this.tableData.splice(scope.$index,1)
         }
        
      })
      },
      reload:function(){
       this.$axios.get("http://localhost:8080/merchant/solvedorder/"+JSON.parse(window.sessionStorage.getItem("user")).id).then(res =>{
        console.log("重新加载") 
        this.tableData = res.data.data
        
      })
      }
    },
      components:{
      detail,
    },
    // 调用后台已处理订单方法
    mounted(){
        // console.log("用户信息："+JSON.parse(window.sessionStorage.getItem("user")))
        console.log("用户id："+JSON.parse(window.sessionStorage.getItem("user")).id)
        //后台用session获取id更简单
        this.$axios.get("http://localhost:8080/merchant/solvedorder/"+JSON.parse(window.sessionStorage.getItem("user")).id).then(res =>{
         console.log(res.data)//ResponseResult
        console.log(res.data.data)  
        this.tableData = res.data.data
        
      })
    }
}
</script>
<style>
</style>